<template>
  <div class="history">
    <list v-if="show">
      <list-item v-for="(item,index) in list" :key="index" @click.native="handleOnClick(item)">
        <title-tpl slot="title" :value="item.payproname"></title-tpl>
        <desc-tpl slot="content" label="订单号" :value="item.orderno"></desc-tpl>
        <desc-tpl slot="content" label="金额" :value="item.orderamt | formatPrice" fashion="stress"></desc-tpl>
        <desc-tpl slot="content" :label="item.paytime" value="查看凭证">
          <span slot="value" class="see-certificate">查看凭证</span>
        </desc-tpl>
      </list-item>
    </list>
    <default-page v-if="empty" text="暂无报名缴费历史"></default-page>
  </div>
</template>
<script>
import { List, ListItem } from '@/components/list';
import DescTpl from '@/components/desc';
import TitleTpl from '@/components/titleTpl';
import DefaultPage from '@/components/defaultPage';
export default {
  name: 'history',
  components: { List, ListItem, DescTpl, TitleTpl, DefaultPage },
  data() {
    return {
      list: [],
      show: false,
      empty: false
    }
  },
  created() {
    this._getData();
  },
  activated() {
    document.title = '报名历史'
  },
  methods: {
    async _getData() {
      let t = this.$toast.loading({ duration: 0 })
      try {
        let res = await this.$http.getOrderListByTxcode({
          txcode: '16'
        });
        if (Array.isArray(res.businessData)) {
          this.list = res.businessData;
        }
        this.show = this.list.length > 0;
        this.empty = this.list.length === 0;
        t.clear();
      } catch (error) {
        console.log(error)
      }
    },
    handleOnClick(val) {
      this.$router.push({ path: '/certificate', query: { orderno: val.orderno } })
    }
  }
}
</script>
<style lang="less" scoped>
@import url("../assets/less/base.less");
.history {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  .see-certificate {
    width: 1.28rem;
    // line-height: 0.4rem;
    background: linear-gradient(
      225deg,
      rgba(255, 161, 92, 1) 0%,
      rgba(255, 125, 61, 1) 100%
    );
    border-radius: 0.22rem;
    color: #ffffff;
    font-size: 0.22rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
